<template>
  <div>
    <!-- 当window.devicePixelRatio为2的时候 -->
    <!-- <canvas ref="canvas" width="1600" height="1200">对不起，您的浏览器不支持</canvas> -->
    <canvas ref="canvas" width="800" height="600">对不起，您的浏览器不支持</canvas>
  </div>
</template>

<script setup>
// 为了获取到canvas dom
import {ref,onMounted} from 'vue'

// 获取canvas dom引用
// 注意一定不要用dom操作
// const canvas = document.querySelector("#canvas")

//ts写法：
// const canvas = ref<HTMLCanvasElement|null>(null)
// 这里直接
const canvas = ref(null)

const data = {
  columns:[{
    title: '姓名',
    key: 'name',
    width: 100
  },{
    title: '年龄',
    key: 'age',
    width: 100
  }],
  dataSource: Array.from({length: 10}).map((item,index)=>({
    key:index,
    name:`name-${index}`,
    age: Math.floor(Math.random() * 100)
  }))
}

onMounted(() => {
  const ctx=canvas.value.getContext('2d')  //还可以是webgl(这里参考three.js)
  
  const {columns,dataSource}=data

  const pixelRatio=window.devicePixelRatio

  const cellWidth = 100 * pixelRatio
  const cellHeight = 50 * pixelRatio
  const padding = 10
  // 画表格

  // 画表头
  for (let i=0; i<columns.length; i++){
    const column=columns[i]
    ctx.font =`bold ${16*pixelRatio}px serif`
    ctx.fillText(column.title,i*cellWidth+padding,cellHeight/2)
    console.log("column",column);
  } 

  // 表格
  for (let i=0; i<dataSource.length; i++){
    const record=dataSource[i]
    for (let j=0; j<columns.length; j++){
      const column=columns[j]
      ctx.font =`${16*pixelRatio}px serif`
      ctx.fillText(record[column.key],j*cellWidth+padding,cellHeight*(i+1)+cellHeight/2)
    }
  } 

  ctx.beginPath()
  
  ctx.closePath()

});
</script>

<style scoped>
canvas{
  background-color: #eee;
  width: 800px;   /* 这个是正常宽度 */
  height: 600px;  /* 这个是正常高度 */
}
</style>